Programming with Wijmo 5 Control Extensions

All controls in the Cloud Business App Edition are optimized to be used with Wijmo 5 controls. You can access and customize these controls using JavaScript. The basic Cloud Business App enables you to add screen templates and data to perform- editing, scrolling, and paging in flexGrid, and data visualization in FlexChart, FlexPie, and Gauges with automatically generated code. With Wijmo 5 extensions, you can customize each control and discover additional features using JavaScript.

The ICollectionView class is the main data binding class used for these controls. Refer http://wijmo.com/5/docs/topic/wijmo.collections.CollectionView.Class.html for more information.

The following code sample demonstrates how to set selection modes in FlexGrid using JavaScript.

JavaScript	Copy Code
screen.grid = grid.wjControl; myapp.GridSelectionModes.SelectionMode_render = function (element, contentItem) { var selectCtr, selecthtml = '<select>\ <option value="None">None</option>\ <option value="Cell">Cell</option>\ <option value="CellRange" selected>CellRange</option>\ <option value="Row">Row</option>\ <option value="RowRange">RowRange</option>\ <option value="ListBox">ListBox</option>\ </select>'; selectCtr = $(selecthtml).appendTo(element); selectCtr.on("change", function () { screen.grid.selectionMode = selectCtr.val(); });

JavaScript

Copy Code

screen.grid = grid.wjControl;
myapp.GridSelectionModes.SelectionMode_render = function (element, contentItem)
{
   var selectCtr, selecthtml = '<select>\
          <option value="None">None</option>\
          <option value="Cell">Cell</option>\
          <option value="CellRange" selected>CellRange</option>\
          <option value="Row">Row</option>\
          <option value="RowRange">RowRange</option>\
          <option value="ListBox">ListBox</option>\
                    </select>';
   selectCtr = $(selecthtml).appendTo(element);
   selectCtr.on("change", function () {
       screen.grid.selectionMode = selectCtr.val();
});

See Wijmo FlexGrid API Documentation for more information.

The following topics illustrate customization of FlexGrid in JavaScript.